{% if menu is defined %} {% set module_row = 'ss' %}

	{% if menu.megamenu_id > 0 %}
		<h3>{{ text_edit_menu|format(menu.title, menu.megamenu_id) }}</h3>
	{% else %}
		<h3>{{ text_create_new }}</h3>
	{% endif %}

	<input type="hidden" name="megamenu[item]" value="{{ menu.item }}" />
	<table class="table">
		<tr>
			<td>{{ entry_menu_title }}</td>
			<td>
				<input class="form-control" name="megamenu[title]" value="{{ menu.title }}"/>
			</td>
		</tr>
		<tr>
			<td class="col-sm-3">{{ entry_publish }}</td>
			<td class="col-sm-9">
				<select class="form-control" type="list" name="megamenu[published]" >
					{% for key, val in yesno %}
					<option value="{{ key }}" {% if key== menu.published %} selected="selected" {% endif %}>{{ val }}</option>
					{% endfor %}
				</select>
 			</td>
		</tr>
		<tr class="bg-warning">
			<td class="col-sm-3">{{ entry_type }}</td>
			<td class="col-sm-9"> 
				<select class="form-control" name="megamenu[type]" id="megamenutype">
					{% for mt, val in megamenutypes %} 
					<option value="{{ mt }}" {% if mt == menu.type %} selected="selected" {% endif %}>{{ val }}</option>
					{% endfor %}
				</select>
 			</td>
		</tr>
		<tr id="megamenutype-url" class="megamenutype">
			<td class="col-sm-3">{{ entry_url }}</td>
			<td class="col-sm-9">
				<input type="text" class="form-control" name="megamenu[url]" value="{{ menu.url }}" size="50"/>
			</td>
		</tr>
		<tr id="megamenutype-category" class="megamenutype">
			<td class="col-sm-3">{{ entry_category }}</td>
			<td class="col-sm-9">
				<input type="text" class="form-control" name="path" value="{{ menu.megamenu_category }}" size="100" />
                <i>{{ text_explain_input_auto }}</i>
			</td>
		</tr>
		<tr id="megamenutype-product" class="megamenutype">
			<td class="col-sm-3">{{ entry_product }}</td>
			<td class="col-sm-9">
				<input type="text" class="form-control" name="megamenu_product" value="{{ menu.megamenu_product }}" size="50"/>
				<i>{{ text_explain_input_auto }}</i>
			</td>
		</tr>
		<tr id="megamenutype-manufacturer" class="megamenutype">
			<td class="col-sm-3">{{ entry_manufacturer }}</td>
			<td class="col-sm-9">
				<input type="text" class="form-control" name="megamenu_manufacturer" value="{{ menu.megamenu_manufacturer }}" size="50"/>
				<i>{{ text_explain_input_auto }}</i>
			</td>
		</tr>
		<tr id="megamenutype-information" class="megamenutype">
			<td class="col-sm-3">{{ entry_information }}</td>
			<td class="col-sm-9">
				
				<select class="form-control" type="text" name="megamenu_information" id="megamenu_information">
					{% for info in informations %}
					<option value="{{ info.information_id }}" {% if menu.megamenu_information == info.information_id %} selected="selected" {% endif %}>{{ info.title }}</option>
					{% endfor %}
				</select>
				
			</td>
		</tr>

	
		<tr id="megamenutype-html" class="megamenutype">
			<td class="col-sm-3">{{ entry_html }}</td>
			<td class="col-sm-9">
				<textarea class="form-control" data-toggle="ckeditor" data-lang="{{ ckeditor }}" name="megamenu[content_text]" id="content_text">{{ menu.content_text }}</textarea>
			</td>
		</tr>
	</table>

	<h4>{{ entry_menu_param }}</h4>	  
	<table class="table">
		<tr>
			<td class="col-sm-3">{{ entry_parent_id }}</td>
				
			<td class="col-sm-9">
				{{ menus }}
 			</td>
		</tr>
	 	<tr>
			<td class="col-sm-2 control-label">{{ entry_image }}</td>
			<td class="col-sm-10">
				
				<div class="card image">
				  <img src="{{ thumb }}" alt="" title="" id="thumb-image" data-placeholder="{{ placeholder }}" class="card-img-top"/>
				  <input type="hidden" name="megamenu[image]" value="{{ menu.image }}" id="input-image"/>
				  <div class="card-body">
					<button type="button" data-toggle="image" data-target="#input-image" data-thumb="#thumb-image" class="btn btn-primary btn-sm btn-block"><i class="fas fa-pencil-alt"></i> {{ button_edit }}</button>
					<button type="button" data-toggle="clear" data-target="#input-image" data-thumb="#thumb-image" class="btn btn-warning btn-sm btn-block"><i class="fas fa-trash-alt"></i> {{ button_clear }}</button>
				  </div>
				</div>
				  
			</td>
        </tr>
	 	<tr>
			<td class="col-sm-2 control-label">{{ entry_icon }}</td>
			<td class="col-sm-10">
				<input type="text" class="form-control" name="verticalmenu[icon]" value="{{ menu.icon }}"/>
				<i>{{ text_explain_input_icon }}</i>
			</td>
        </tr>
		<tr>
			<td class="col-sm-3">{{ entry_menuclass }}</td>
			<td class="col-sm-9">
				<input type="text" class="form-control" name="megamenu[menu_class]" value="{{ menu.menu_class }}"/>
			</td>
		</tr>

		<tr>
			<td class="col-sm-3">{{ entry_badges }}</td>
			<td class="col-sm-9">
				<input type="text" class="form-control" name="megamenu[badges]" value="{{ menu.badges ? menu.badges }}"/>
			</td>
		</tr>

		<tr>
			<td class="col-sm-3">{{ entry_showtitle }}</td>
				
			<td class="col-sm-9">
				<select class="form-control" type="list" name="megamenu[show_title]" >
					{% for key, val in yesno %}
					<option value="{{ key }}" {% if key == menu.show_title %} selected="selected" {% endif %}>{{ val }}</option>
					{% endfor %}
				</select>
 			</td>
		</tr>
		<tr class="hide">
			<td class="col-sm-3">{{ entry_isgroup }}</td>
				
			<td class="col-sm-9">
				<select class="form-control" type="list" name="megamenu[is_group]" value="">
					{% for key, val in yesno %}
					<option value="{{ key }}" {% if key == menu.is_group %} selected="selected" {% endif %}>{{ val }}</option>
					{% endfor %}
				</select>
				<i>{{ text_explain_group }}</i>
 			</td>
		</tr>
		<tr style="display:none">
			<td class="col-sm-3">{{ entry_iscontent }}</td>
			<td class="col-sm-9">
				<select class="form-control" type="list" name="megamenu[is_content]">
					{% for key, val in yesno %}
					<option value="{{ key }}" {% if key == menu.is_content %} selected="selected" {% endif %}>{{ val }}</option>
					{% endfor %}
				</select>
 			</td>
		</tr>
		
		
		
		<tr class="alert alert-danger">
			<td class="col-sm-3">{{ entry_sub_menutype }}</td>
			<td class="col-sm-9">
				<select class="form-control" name="megamenu[type_submenu]" id="megamenu-type_submenu">
					{% for stype, text in submenutypes %}
					<option value="{{ stype }}" {% if stype == menu.type_submenu %} selected="selected" {% endif %}>{{ text }}</option>
					{% endfor %}
				</select>
				<i>{{ text_explain_submenu_type }}</i>
			</td>
		</tr>
		<tr class="type_submenu" id="type_submenu-html" style="display:none;">
			<td class="col-sm-3">{{ entry_submenu_content }}</td>
			<td class="col-sm-9">
				<textarea name="megamenu[submenu_content]" data-toggle="ckeditor" data-lang="{{ ckeditor }}" id="submenu_content">{{ menu.submenu_content }}</textarea>
			
			</td>
		<tr>
	 	<tr>
			<td class="col-sm-3">
				{{ entry_submenu_width }}
			</td>	
			<td class="col-sm-9">
				<input type="text" class="form-control" name="megamenu[submenu_width]" value="{{ menu.submenu_width }}"/>
				<i>{{ entry_submenu_width_explain }}</i>
 			</td>
		</tr>

		<tr>

			<td class="col-sm-3">
				{{ entry_submenu_alignment }}
			</td>	
			<td class="col-sm-9">
				<select class="form-control" name="megamenu[width]">
					{% for key, align in width_aligns %}
					<option value="{{ key }}" {% if menu.width == key %} selected="selected" {% endif %}>{{ align }}</option>
					{% endfor %}
				</select>
				<i>{{ entry_submenu_alignment_explain }}</i>
 			</td>
		</tr>

	</table>
	<input type="hidden" name="megamenu[megamenu_id]" value="{{ menu.megamenu_id }}"/>
</div>
{% endif %}

<script type="text/javascript"> 

$('textarea[data-toggle=\'ckeditor\']').ckeditor();


$("#type_submenu-"+$("#megamenu-type_submenu").val()).show();
$("#megamenu-type_submenu").change( function(){
	$(".type_submenu").hide();
	$("#type_submenu-"+$(this).val()).show();
} );



$('#language-{{ module_row }} li:first-child a').tab('show');


$(".megamenutype").hide();
$("#megamenutype-"+ $("#megamenutype").val()).show();
$("#megamenutype").change( function(){
	$(".megamenutype").hide();
	$("#megamenutype-"+$(this).val()).show();
} );

   

$('input[name=\'megamenu_manufacturer\']').autocomplete({
	source: function(request, response) {		
		$.ajax({
			url: 'index.php?route=catalog/manufacturer/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request.term),
			dataType: 'json',
			success: function(json) {
				json.unshift({
					'manufacturer_id':  0,
					'name':  '{{ text_none }}'
				});
				
				response($.map(json, function(item) {
					return {
						label: item.name,
						value: item.manufacturer_id
					}
				}));
			}
		});
	},
	
	select: function(event, ui) {
		$('input[name=\'megamenu_manufacturer\']').val(ui.item.label);
		$('input[name=\'megamenu[item]\']').val(ui.item.value);
		
		return false;
	},
	focus: function(event, ui) {
      	return false;
   	}
});

$("#megamenu_information").change( function(){ 
	$('input[name=\'megamenu[item]\']').val($(this).val());
} );

$('input[name=\'megamenu_product\']').autocomplete({
	source: function(request, response) {		
		$.ajax({
			url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request.term),
			dataType: 'json',
			success: function(json) {
				json.unshift({
					'product_id':  0,
					'name':  '{{ text_none }}'
				});
				
				response($.map(json, function(item) {
					return {
						label: item.name,
						value: item.product_id
					}
				}));
			}
		});
	},
	select: function(event, ui) {
		$('input[name=\'megamenu_product\']').val(ui.item.label);
		$('input[name=\'megamenu[item]\']').val(ui.item.value);
		
		return false;
	},
	focus: function(event, ui) {
      	return false;
   	}
});

$('input[name=\'path\']').autocomplete({
	source: function(request, response) {		
		$.ajax({
			url: 'index.php?route=catalog/category/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request.term),
			dataType: 'json',
			success: function(json) {
				json.unshift({
					'category_id':  0,
					'name':  '{{ text_none }}'
				});
				
				response($.map(json, function(item) {
					return {
						label: item.name,
						value: item.category_id
					}
				}));
			}
		});
	},
	select: function(event, ui) {
		$('input[name=\'path\']').val(ui.item.label);
		$('input[name=\'megamenu[item]\']').val(ui.item.value);
		
		return false;
	},
	focus: function(event, ui) {
      	return false;
   	}
});
//--></script>
</script>